<template>
  <el-card class="sales">
    <div class="sales-header">
      <span>支付笔数</span>
      <i class="el-icon-warning-outline" />
    </div>

    <div class="sales-body">
      <span class="sales-value">182425</span>
      <div class="sales-chart">
        <BarChart />
      </div>
    </div>

    <div class="sales-footer">转化率 60.2%</div>
  </el-card>
</template>

<script>
import BarChart from './BarChart.vue'

export default {
  name: 'Pay',
  components: {
    BarChart
  }
}
</script>

<style>
.sales {
  margin-bottom: 10px;
}
.sales-header {
  display: flex;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.sales-value {
  display: block;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
}
.sales-chart {
  display: flex;
  align-items: flex-end;
  height: 50px;
  font-size: 14px;
}
.sales-icon-red {
  color: red;
}
.sales-icon-green {
  color: green;
}

.sales-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
</style>
